<template>
  <Drawer ref="DrawerRef" title="推荐产品" @submit="submit" submitText="关联">
    <div class="text-dark-600">
      <el-table :data="tableList">
        <el-table-column label="ID" prop="id" width="150"></el-table-column>
        <el-table-column label="商品封面" prop="id" width="150">
          <template #default="{ row }">
            <el-image
              :src="row.cover"
              fit="cover"
              class="w-[100px] h-[100px] rounded border mr-2"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="商品名"
          prop="name"
          width="250"
        ></el-table-column>

        <el-table-column label="操作">
          <template #default="{ row }">
            <el-popconfirm
              title="是否删除该产品？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="delGoods(row)"
            >
              <template #reference>
                <el-button class="!m-0" type="primary" size="small" text
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </Drawer>
  <ChooseGoods ref="ChooseGoodsRef"></ChooseGoods>
</template>
<script setup>
import { ref } from "vue";
import Drawer from "@/components/Drawer/index.vue";
import {
  getCategoryGoods,
  delCategoryGoods,
  addCategoryGoods,
} from "@/api/category";
import { Toast } from "@/utils/utils";
import ChooseGoods from "@/components/ChooseGoods/index.vue";
let DrawerRef = ref();
let category_id = ref(0);
let tableList = ref([]);
const getData = () => {
  getCategoryGoods(category_id.value).then((res) => {
    tableList.value = res.data;
  });
};

const open = (data) => {
  category_id.value = data.id;
  DrawerRef.value.openDrawer();
  getData();
};

let ChooseGoodsRef = ref();
// 关联产品
const submit = () => {
  ChooseGoodsRef.value.open((ids) => {
    // console.log(ids);
    addCategoryGoods({
      category_id: category_id.value,
      goods_ids: ids,
    }).then((res) => {
      if (res.status === 200) {
        Toast("关联成功");
        getData();
      }
    });
  });
};
// 删除关联产品
const delGoods = (row) => {
  delCategoryGoods(row.id).then((res) => {
    if (res.status === 200) {
      Toast("删除成功");
      getData();
    }
  });
};
defineExpose({
  open,
});
</script>
